<template>

  <div class="app-container cam-page">

    <div class="cam-content">

      <section class="panel cam-banner">

        <div class="banner-text">

          <h2>电动车信息</h2>

          <p>统一展示车辆档案，快速了解车主、状态与入校审核详情。</p>

        </div>

        <div class="banner-stat">

          <span class="stat-label">当前记录</span>

          <span class="stat-value">{{ total }}</span>

        </div>

      </section>

      <section class="panel search-panel" v-show="showSearch">

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="auto" class="cam-form">

      <el-form-item label="车牌号" prop="plateNumber">

        <el-input

          v-model="queryParams.plateNumber"

          placeholder="请输入车牌号"

          clearable

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="品牌型号" prop="brand">

        <el-input

          v-model="queryParams.brand"

          placeholder="请输入品牌型号"

          clearable

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="颜色" prop="color">

        <el-input

          v-model="queryParams.color"

          placeholder="请输入颜色"

          clearable

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="所属人ID" prop="ownerId">

        <el-input

          v-model="queryParams.ownerId"

          placeholder="请输入所属人ID"

          clearable

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item>

        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>

        </el-form>

      </section>



      <section class="panel toolbar-panel">

        <el-row :gutter="10" class="mb8 cam-toolbar">

      <el-col :span="1.5">

        <el-button

          type="primary"

          plain

          icon="el-icon-plus"

          size="mini"

          @click="handleAdd"

          v-hasPermi="['system:vehicleofwtd:add']"

        >新增</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="success"

          plain

          icon="el-icon-edit"

          size="mini"

          :disabled="single"

          @click="handleUpdate"

          v-hasPermi="['system:vehicleofwtd:edit']"

        >修改</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="danger"

          plain

          icon="el-icon-delete"

          size="mini"

          :disabled="multiple"

          @click="handleDelete"

          v-hasPermi="['system:vehicleofwtd:remove']"

        >删除</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="warning"

          plain

          icon="el-icon-download"

          size="mini"

          @click="handleExport"

          v-hasPermi="['system:vehicleofwtd:export']"

        >导出</el-button>

      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

        </el-row>

      </section>



      <section class="panel table-panel">

        <div class="table-shell">

    <el-table v-loading="loading" :data="vehicleofwtdList" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="电动车ID" align="center" prop="vehicleId" />

      <el-table-column label="车牌号" align="center" prop="plateNumber" />

      <el-table-column label="品牌型号" align="center" prop="brand" />

      <el-table-column label="颜色" align="center" prop="color" />

      <el-table-column label="车辆照片" align="center" width="150">

        <template slot-scope="scope">

          <el-image

            v-if="scope.row.photoImage"

            :src="scope.row.photoImage"

            :preview-src-list="[scope.row.photoImage]"

            class="table-image"

            fit="cover"

          />

          <span v-else>--</span>

        </template>

      </el-table-column>

      <el-table-column label="所属人ID" align="center" prop="ownerId" />

      <el-table-column label="入校审核状态" align="center" prop="auditStatus" />

      <el-table-column label="车辆状态" align="center" prop="status" />

      <el-table-column label="车辆二维码" align="center" width="150">

        <template slot-scope="scope">

          <el-image

            v-if="scope.row.qrImage"

            :src="scope.row.qrImage"

            :preview-src-list="[scope.row.qrImage]"

            class="table-image"

            fit="contain"

          />

          <span v-else>--</span>

        </template>

      </el-table-column>

      <el-table-column label="备注信息" align="center" prop="remark" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">

        <template slot-scope="scope">

          <el-button

            size="mini"

            type="text"

            icon="el-icon-edit"

            @click="handleUpdate(scope.row)"

            v-hasPermi="['system:vehicleofwtd:edit']"

          >修改</el-button>

          <el-button

            size="mini"

            type="text"

            icon="el-icon-delete"

            @click="handleDelete(scope.row)"

            v-hasPermi="['system:vehicleofwtd:remove']"

          >删除</el-button>

        </template>

      </el-table-column>

    </el-table>

        </div>

        <div class="pagination-wrap">

          <pagination

            v-show="total>0"

            :total="total"

            :page.sync="queryParams.pageNum"

            :limit.sync="queryParams.pageSize"

            @pagination="getList"

          />

        </div>

      </section>



    </div>



    <!-- 添加或修改电动车信息对话框 -->

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="电动车ID" prop="vehicleId">

          <el-input v-model="form.vehicleId" placeholder="请输入电动车ID" />

        </el-form-item>

        <el-form-item label="车牌号" prop="plateNumber">

          <el-input v-model="form.plateNumber" placeholder="请输入车牌号" />

        </el-form-item>

        <el-form-item label="品牌型号" prop="brand">

          <el-input v-model="form.brand" placeholder="请输入品牌型号" />

        </el-form-item>

        <el-form-item label="颜色" prop="color">

          <el-input v-model="form.color" placeholder="请输入颜色" />

        </el-form-item>

        <el-form-item label="车辆照片" prop="photoImage">

          <el-upload

            class="image-uploader"

            action="#"

            :auto-upload="false"

            :show-file-list="false"

            :on-change="file => handleImageChange(file, 'photoImage')"

          >

            <img v-if="form.photoImage" :src="form.photoImage" class="image-preview" alt="车辆照片" />

            <i v-else class="el-icon-plus avatar-uploader-icon" />

          </el-upload>

          <el-button v-if="form.photoImage" type="text" @click="clearImage('photoImage')">清除</el-button>

        </el-form-item>

        <el-form-item label="所属人ID" prop="ownerId">

          <el-input v-model="form.ownerId" placeholder="请输入所属人ID" />

        </el-form-item>

        <el-form-item label="车辆二维码" prop="qrImage">

          <el-upload

            class="image-uploader"

            action="#"

            :auto-upload="false"

            :show-file-list="false"

            :on-change="file => handleImageChange(file, 'qrImage')"

          >

            <img v-if="form.qrImage" :src="form.qrImage" class="image-preview" alt="车辆二维码" />

            <i v-else class="el-icon-plus avatar-uploader-icon" />

          </el-upload>

          <el-button v-if="form.qrImage" type="text" @click="clearImage('qrImage')">清除</el-button>

        </el-form-item>

        <el-form-item label="备注信息" prop="remark">

          <el-input v-model="form.remark" placeholder="请输入备注信息" />

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitForm">确 定</el-button>

        <el-button @click="cancel">取 消</el-button>

      </div>

    </el-dialog>

  </div>

</template>



<script>

import { listVehicleofwtd, getVehicleofwtd, delVehicleofwtd, addVehicleofwtd, updateVehicleofwtd } from "@/api/system/vehicleofwtd"



export default {

  name: "Vehicleofwtd",

  data() {

    return {

      // 遮罩层

      loading: true,

      // 选中数组

      ids: [],

      // 非单个禁用

      single: true,

      // 非多个禁用

      multiple: true,

      // 显示搜索条件

      showSearch: true,

      // 总条数

      total: 0,

      // 电动车信息表格数据

      vehicleofwtdList: [],

      // 弹出层标题

      title: "",

      // 是否显示弹出层

      open: false,

      // 查询参数

      queryParams: {

        pageNum: 1,

        pageSize: 10,

        plateNumber: null,

        brand: null,

        color: null,

        ownerId: null,

        auditStatus: null,

        status: null

      },

      // 表单参数

      form: {},

      // 表单校验

      rules: {

        plateNumber: [

          { required: true, message: "车牌号不能为空", trigger: "blur" }

        ],

        ownerId: [

          { required: true, message: "所属人ID不能为空", trigger: "blur" }

        ],

      }

    }

  },

  created() {

    this.getList()

  },

  methods: {

    /** 查询电动车信息列表 */

    getList() {

      this.loading = true

      listVehicleofwtd(this.queryParams).then(response => {

        this.vehicleofwtdList = response.rows

        this.total = response.total

        this.loading = false

      })

    },

    // 取消按钮

    cancel() {

      this.open = false

      this.reset()

    },

    // 表单重置

    reset() {

      this.form = {
        vehicleId: null,
        originalVehicleId: null,
        plateNumber: null,
        brand: null,

        color: null,

        photoImage: null,

        ownerId: null,

        auditStatus: null,

        status: null,

        qrImage: null,

        createTime: null,

        updateTime: null,

        remark: null

      }

      this.resetForm("form")

    },

    handleImageChange(file, field) {

      if (!file || !file.raw) {

        return false

      }

      const raw = file.raw

      if (!raw.type.startsWith("image/")) {

        this.$message.error("请上传图片文件")

        return false

      }

      const reader = new FileReader()

      reader.onload = e => {

        this.$set(this.form, field, e.target.result)

      }

      reader.readAsDataURL(raw)

      return false

    },

    clearImage(field) {

      this.$set(this.form, field, null)

    },

    /** 搜索按钮操作 */

    handleQuery() {

      this.queryParams.pageNum = 1

      this.getList()

    },

    /** 重置按钮操作 */

    resetQuery() {

      this.resetForm("queryForm")

      this.handleQuery()

    },

    // 多选框选中数据

    handleSelectionChange(selection) {

      this.ids = selection.map(item => item.vehicleId)

      this.single = selection.length!==1

      this.multiple = !selection.length

    },

    /** 新增按钮操作 */

    handleAdd() {

      this.reset()

      this.open = true

      this.title = "添加电动车信息"

    },

    /** 修改按钮操作 */

    handleUpdate(row) {

      this.reset()

      const vehicleId = row.vehicleId || this.ids

      getVehicleofwtd(vehicleId).then(response => {

        this.form = response.data
        this.form.originalVehicleId = response.data.vehicleId

        this.open = true

        this.title = "修改电动车信息"

      })

    },

    /** 提交按钮 */

    submitForm() {

      this.$refs["form"].validate(valid => {

        if (valid) {

          if (this.form.originalVehicleId != null) {
            updateVehicleofwtd(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false

              this.getList()

            })

          } else {
            addVehicleofwtd(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")

              this.open = false

              this.getList()

            })

          }

        }

      })

    },

    /** 删除按钮操作 */

    handleDelete(row) {

      const vehicleIds = row.vehicleId || this.ids

      this.$modal.confirm('是否确认删除电动车信息编号为"' + vehicleIds + '"的数据项？').then(function() {

        return delVehicleofwtd(vehicleIds)

      }).then(() => {

        this.getList()

        this.$modal.msgSuccess("删除成功")

      }).catch(() => {})

    },

    /** 导出按钮操作 */

    handleExport() {

      this.download('system/vehicleofwtd/export', {

        ...this.queryParams

      }, `vehicleofwtd_${new Date().getTime()}.xlsx`)

    }

  }

}

</script>



<style lang="scss" scoped>

.cam-page {

  background: linear-gradient(130deg, #eef2ff 0%, #fbf0ff 45%, #ebf9ff 100%);

  min-height: calc(100vh - 86px);

  padding: 24px;

}



.cam-content {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 18px;

}



.panel {

  --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(253, 252, 255, 0.92));

  position: relative;

  background:

    var(--panel-bg) padding-box,

    linear-gradient(120deg, rgba(95, 137, 255, 0.35), rgba(241, 148, 255, 0.32), rgba(189, 228, 255, 0.4)) border-box;

  border-radius: 18px;

  border: 4px solid transparent;

  box-shadow: 0 30px 65px -45px rgba(21, 32, 67, 0.9);

  padding: 20px 24px;

  backdrop-filter: blur(8px);

  z-index: 0;

}



.cam-banner {

  --panel-bg: linear-gradient(120deg, rgba(85, 110, 255, 0.18), rgba(234, 86, 255, 0.14));

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.banner-text h2 {

  margin: 0 0 6px;

  font-size: 22px;

  color: #2b2d42;

  font-weight: 600;

}



.banner-text p {

  margin: 0;

  color: #5b6180;

  font-size: 14px;

}



.banner-stat {

  text-align: right;

  color: #252846;

}



.stat-label {

  font-size: 13px;

  display: block;

  margin-bottom: 4px;

  opacity: 0.8;

}



.stat-value {

  font-size: 34px;

  line-height: 1;

  font-weight: 600;

}



.search-panel {

  padding-bottom: 6px;

}



.cam-form {

  width: 100%;

}



.search-panel ::v-deep .el-form-item {

  margin-right: 12px;

  margin-bottom: 16px;

}



.search-panel ::v-deep .el-input__inner,

.search-panel ::v-deep .el-date-editor .el-input__inner {

  border-radius: 10px;

  background: #f5f7ff;

  border-color: transparent;

  box-shadow: inset 0 0 0 1px rgba(91, 105, 207, 0.08);

}



.search-panel ::v-deep .el-input__inner:focus,

.search-panel ::v-deep .el-date-editor .el-input__inner:focus {

  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.35);

}



.toolbar-panel {

  padding: 14px 24px 10px;

}



.cam-toolbar {

  width: 100%;

}



.toolbar-panel ::v-deep .el-row {

  align-items: center;

  flex-wrap: wrap;

  row-gap: 8px;

}



.toolbar-panel ::v-deep .el-col {

  min-width: 120px;

}



.toolbar-panel ::v-deep .el-button {

  border-radius: 999px;

  padding: 0 18px;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.toolbar-panel ::v-deep .el-button:hover {

  transform: translateY(-1px);

}



.toolbar-panel ::v-deep .el-button--primary {

  box-shadow: 0 15px 35px -20px rgba(64, 158, 255, 1);

}



.toolbar-panel ::v-deep .right-toolbar {

  margin-left: auto;

  padding-top: 4px;

}



.table-panel {

  padding: 18px 24px 8px;

}



.table-shell {

  border-radius: 18px;

  overflow: hidden;

  border: 4px solid transparent;

  background:

    linear-gradient(180deg, #ffffff, #fdfdff) padding-box,

    linear-gradient(120deg, rgba(93, 144, 255, 0.35), rgba(179, 231, 255, 0.4)) border-box;

  box-shadow: 0 35px 65px -45px rgba(0, 16, 54, 0.9);

}



.table-panel ::v-deep .el-table {

  background-color: white;

}



.table-panel ::v-deep .el-table__header-wrapper th {

  background: linear-gradient(90deg, #f9faff 0%, #f0f4ff 100%);

  color: #475467;

  font-weight: 600;

}



.table-panel ::v-deep .el-table__body tr {

  transition: background 0.2s ease;

}



.table-panel ::v-deep .el-table__body tr:hover > td {

  background: rgba(98, 117, 255, 0.08);

}



.table-panel ::v-deep .el-table .cell {

  color: #2f3142;

}



.pagination-wrap {

  display: flex;

  justify-content: flex-end;

  padding: 16px 4px 0;

}



.image-uploader {

  border: 1px dashed #d9d9d9;

  border-radius: 6px;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  width: 120px;

  height: 120px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: #fafafa;

}



.avatar-uploader-icon {

  font-size: 24px;

  color: #8c939d;

}



.image-preview {

  width: 120px;

  height: 120px;

  object-fit: cover;

  display: block;

}



.table-image {

  width: 60px;

  height: 60px;

  border-radius: 6px;

  object-fit: cover;

}



@media (max-width: 1180px) {

  .cam-content {

    max-width: 100%;

  }



  .banner-stat {

    text-align: left;

  }

}



@media (max-width: 768px) {

  .cam-page {

    padding: 16px;

  }



  .cam-banner {

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

  }



  .toolbar-panel ::v-deep .el-col {

    min-width: 140px;

  }

}

</style>